<script setup>

//单题 统计
import {getQuestionTypeText} from "../../utils/CommonsUtil.js";
import {ref} from "vue";
import StatisticsCharts from "./StatisticsCharts.vue";

const props = defineProps({
    data:{
        type:Object,
        required:true
    }
})
const isShowTable = ref(true);
const currentChart = ref(0);

const setChart = (num)=>{
    if (num === currentChart.value){
        currentChart.value = 0
    }else{
        currentChart.value = num
    }

}

</script>

<template>
    <div class="p-3">
        <p>
            <span class="text-gray-400">[{{getQuestionTypeText(data.type)}}]</span>
            &nbsp;
            <span style="font-size: 15px;">第{{props.data.orders}}题:</span>
            <span class="pl-4" v-html="data.content"></span>
        </p>

<!--        单选或者多选 表格统计-->
        <div class="w-full" >
            <div v-show="isShowTable">
                <a-table :pagination="false" :data="data.list" v-if="data.type === 1 || data.type === 0">
                    <template #columns>
                        <a-table-column title="内容" :width="210">
                            <template #cell="{ record }">
                                <span v-html="record.content"></span>
                            </template>
                        </a-table-column>
                        <a-table-column title="value" data-index="value"></a-table-column>
                        <a-table-column title="次数" :sortable="{ sortDirections: ['ascend', 'descend']}" data-index="count"></a-table-column>
                        <a-table-column title="比例" :width="280" :sortable="{ sortDirections: ['ascend', 'descend']}">
                            <template #cell="{ record }">
                                <a-progress :percent="record.percent" :style="{width:'50%'}" />
                            </template>
                        </a-table-column>
                    </template>
                </a-table>

                <a-table :pagination="false" :data="data.list"
                         v-if="data.type === 2 || data.type === 3 || data.type === 4 || data.type === 5">
                    <template #columns>
                        <a-table-column title="回答内容" data-index="value"></a-table-column>
                        <a-table-column title="次数" :sortable="{ sortDirections: ['ascend', 'descend']}" data-index="count"></a-table-column>
                        <a-table-column title="比例" :width="280" :sortable="{ sortDirections: ['ascend', 'descend']}">
                            <template #cell="{ record }">
                                <a-progress :percent="record.percent" :style="{width:'50%'}" />
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </div>

<!--            图表统计-->
            <div class="flex justify-end mr-4 mt-3">
                <a-button-group type="primary">
                    <a-button @click="isShowTable = !isShowTable"> 表格 </a-button>
                    <a-button @click="setChart(1)"> 饼图 </a-button>
                    <a-button @click="setChart(2)"> 柱状图 </a-button>
                </a-button-group>
            </div>

            <div v-if="currentChart > 0">
                <StatisticsCharts :question="data" :type="currentChart"/>
            </div>

        </div>
        <a-divider/>
    </div>
</template>

<style scoped>

</style>